<template>
  <button
    type="primary"
    :style="style"
    :disabled="disabled"
    :loading="disabled"
    hover-class="button-hover"
    @click="onSubmit"
    :class="{ radius: round }"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    onSubmit?: () => any
    bgColor?: string
    round?: boolean
    style?: Record<string, any>
  }>(),
  {
    bgColor: '#0f77fe',
    height: '100px',
    round: true,
  },
)

const disabled = ref<boolean>(false)

const onSubmit = () => {
  alert(1)
  console.log(Object.prototype.toString.call(props.onSubmit))
  if (props.onSubmit && Object.prototype.toString.call(props.onSubmit) === '[object Function]') {
    props.onSubmit().then((resp) => {})
  }
}
</script>

<style lang="scss" scoped>
button {
  width: 100%;
  border: none;
  &.radius {
    border-radius: 200rpx;
  }
}
</style>
